<template>
    <d2-container>
        <el-table :data="log" size="mini" style="width: 100%" empty-text="暂无日志信息" stripe>
            <!-- 时间 -->
            <el-table-column prop="time" label="发生时间" width="140">
            </el-table-column>
            <!-- 信息 -->
            <el-table-column prop="message" label="消息">
            </el-table-column>
            <!-- 触发页面 -->
            <el-table-column label="地址" align="center" min-width="200">
                <template slot-scope="scope">
                    {{get(scope.row, 'meta.url')}}
                </template>
            </el-table-column>
            <!-- 触发组件 -->
            <el-table-column label="组件" align="center" min-width="120">
                <template slot-scope="scope">
                    <el-tag v-if="get(scope.row, 'meta.instance.$vnode.componentOptions.tag')" type="info" size="mini">
                        &#60;{{get(scope.row, 'meta.instance.$vnode.componentOptions.tag')}}&gt;
                    </el-tag>
                </template>
            </el-table-column>
            <!-- 查看详情 -->
            <el-table-column fixed="right" align="center" label="详情" width="100">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="handleShowMore(scope.row)">
                        <d2-icon name="eye" />
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div slot="footer">
            <el-button type="primary" size="mini" :loading="uploading" @click="handleUpload" v-show="log.length>0">
                <d2-icon name="cloud-upload" />
                上传 {{log.length}} 个日志
            </el-button>
            <el-popover placement="top" width="160" v-model="visible" v-show="log.length>0">
                <p>确认要清理所有日志吗?</p>
                <div style="text-align: right; margin: 0">
                    <el-button size="mini" type="text" @click="visible = false">取消</el-button>
                    <el-button type="primary" size="mini" @click="cleanLogs">确定</el-button>
                </div>
                <el-button slot="reference" type="danger" size="mini">
                    <d2-icon name="trash-o" />
                    清理日志
                </el-button>
            </el-popover>
        </div>
    </d2-container>
</template>

<script>
import { mapState } from "vuex";
import { get } from "lodash";
export default {
    data() {
        return {
            uploading: false,
            visible: false,
        };
    },
    computed: {
        ...mapState("d2admin/log", ["log"]),
    },
    methods: {
        get,
        handleShowMore(log) {
            // 打印一条日志的所有信息到控制台
            this.$notify({
                type: "info",
                title: "日志详情",
                message: "完整的日志内容已经打印到控制台",
            });
            this.$log.capsule("bwch", "handleShowMore", "primary");
            console.group(log.message);
            console.log("time: ", log.time);
            console.log("type: ", log.type);
            console.log(log.meta);
            console.groupEnd();
        },
        // 日志上传
        handleUpload() {
            this.uploading = true;
            this.$notify({
                type: "info",
                title: "日志上传",
                message: `开始上传${this.log.length}条日志`,
            });
            setTimeout(() => {
                this.uploading = false;
                this.$notify({
                    type: "success",
                    title: "日志上传",
                    message: "上传成功",
                });
            }, 3000);
        },
        cleanLogs() {
            this.$store.dispatch("d2admin/log/clean"); //清理日志
            this.$notify({
                type: "success",
                title: "提醒",
                message: "日志已全部清理完毕",
            });
            this.visible = false;
        }
    },
};
</script>
